<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>盒模型 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/19.013b5e02.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="active sidebar-link">02-CSS盒模型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/04-盒模型.html#盒模型" class="sidebar-link">盒模型</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/04-盒模型.html#垂直外边距合并-折叠-现象" class="sidebar-link">垂直外边距合并(折叠)现象</a></li></ul></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="盒模型"><a href="#盒模型" class="header-anchor">#</a> 盒模型</h2> <p>CSS可以将元素设置一个个矩形的盒子,将元素设置成矩形盒子后,对页面的布局就是将不同盒子放在不同的位置</p> <p>每个盒子由以下几部分组成</p> <blockquote><p>内容区(content)</p> <p>内边距(padding)</p> <p>边框(border)</p> <p>外边距(margin)</p></blockquote> <h3 id="内容区-width和height"><a href="#内容区-width和height" class="header-anchor">#</a> 内容区(width和height)</h3> <blockquote><p>width和height属性用来设置内容区域的宽和高,也就是元素可渲染内容区的宽高.</p> <p>内容默认左上角原点开始排列.</p> <p><strong>块级元素默认宽度是父级宽度100%,行内元素宽度默认由里面内容撑开</strong></p> <p><strong>所有元素的高度不设置的情况下在默认情况下由内容撑开，也就是随内容多少的变化而变化</strong></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*
  内容区的大小由width和height两个属性来设置
  width设置内容区的宽度,height设置内容区的高度
  元素里的所有子元素和文本内容都在内容区排列
*/</span>
&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="边框区-border"><a href="#边框区-border" class="header-anchor">#</a> 边框区(border)</h3> <blockquote><p>块级元素的border的作用是在元素的内容区和padding区外加上一个边框线.</p> <p>通常用来分隔内容,使其不至于散步到背景的边界,</p> <p><strong>复合写法:</strong></p> <p>​				broder:宽度 种类 颜色;</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code> <span class="token selector">.box</span><span class="token punctuation">{</span>
       <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
       <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
       <span class="token property">boder</span><span class="token punctuation">:</span>10px solid green<span class="token punctuation">;</span><span class="token comment">/*通过该属性可以同时设置所有的边框相关样式,没有顺序*/</span>
       <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><blockquote><p>除了boder以外可以四个边单独指定      border-xxx</p> <p>​																border-top:宽度  种类 颜色;</p> <p>​																border-bottom:宽度  种类 颜色;</p> <p>​																 border-left:宽度  种类 颜色;</p> <p>​																 border-right:宽度  种类 颜色;</p></blockquote> <p><strong>border的单例型写法</strong></p> <blockquote><p>border-width边框宽度 默认是3px,</p> <p>可以指定四个方向值的边框宽度</p> <p>​		值的情况</p> <p>​						四个值: 上 右  下 左</p> <p>​						三个值:  上  左右  下</p> <p>​						两个值   上下  左右</p> <p>​						一个值    上下左右</p> <p>除了boder-width以外还有</p> <p>​												 boder-<strong>xxx</strong>-width</p> <p>​												<strong>xxx</strong>可以是top,bottom,left,right</p> <p>​												用来单独指定某一个边的宽度</p> <p>border-style边框样式</p> <p>​					 			  solid实线</p> <p>​									double双边框</p> <p>​									dashed虚线</p> <p>​									dotted圆点</p> <p>​									 <strong>默认是none</strong>没有</p> <p>​								可以指定四个方向值的边框样式</p> <p>​	值的情况</p> <p>​						四个值: 上 右  下 左</p> <p>​						三个值:  上  左右  下</p> <p>​						两个值   上下  左右</p> <p>​						一个值    上下左右</p> <p>除了boder-style以外还有  	 boder-<strong>xxx</strong>-style</p> <p>​												<strong>xxx</strong>可以是top,bottom,left,right</p> <p>​												用来单独指定某一个边狂的样式</p> <p>border-color边框颜色</p> <p>​								 	默认是color文字颜色一致;</p> <p>​									transparent;透明 跟父元素的背景颜色保持一致</p> <p>​									可以指定四个方向值的边框颜色;</p> <p>除了border-color以外还有  	 border-<strong>xxx</strong>-color</p> <p>​												<strong>xxx</strong>可以是top,bottom,left,right</p> <p>​												用来单独指定某一个边狂的颜色</p></blockquote> <p><strong>三边有边框而一边没有设置技巧</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">border</span><span class="token punctuation">:</span>1px solid #000<span class="token punctuation">;</span>
<span class="token property">border-top</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>利用border画一个三角形</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
	<span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token comment">/*元素的宽高都为0,设置不同的边框颜色即可看出每个边框方向分为了四个三角形*/</span>
    <span class="token property">height</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
	<span class="token property">border-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
	<span class="token property">border-color</span><span class="token punctuation">:</span> pink blue yellow green<span class="token punctuation">;</span><span class="token comment">/*此时可以通过设置不同的方向的透明从而画出三角形*/</span>
	<span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="内边距-padding"><a href="#内边距-padding" class="header-anchor">#</a> 内边距(padding)</h3> <blockquote><p><strong>内容区和边框之间的距离就是内边距,不能用来放内容</strong></p> <p>一共有四个方向的内边距</p> <p>​					padding-top  上内边距</p> <p>​					padding-bottom  下内边距</p> <p>​					padding-left  左内边距</p> <p>​					padding-right   右内边距</p> <p>内边距的设置会影响到盒子的大小</p> <p>内边距的颜色继承背景颜色,不能单独设置内边距颜色</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
	  	<span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
    	<span class="token property">height</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
    	<span class="token property">border</span><span class="token punctuation">:</span>1px solid red<span class="token punctuation">;</span>
    	<span class="token property">padding</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span><span class="token comment">/*内边距的简写写法*/</span>
<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><blockquote><p><strong>padding的简写写法</strong></p> <p>padding:100px; 一个值 : 代表上下左右</p> <p>padding:100px 50px; 两个值 :  第一个值代表上下 第2个值代表左右</p> <p>padding:100px 50px 20px; 三个值: 第一个值代表上  第2个值代表左右  第3个值代表下</p> <p>padding:100px 50px 20px 0;四个值:  第一个值上  第二个值右  第三个值下  第四个值左</p></blockquote> <h3 id="margin外边距"><a href="#margin外边距" class="header-anchor">#</a> margin外边距</h3> <blockquote><p>外边距不会影响盒子的大小</p> <p>外边距会影响到盒子的位置</p> <p>一共有四个方向的外边距</p> <p>​					margin-top</p> <p>​							   --- 上外边距   设置一个正值  元素会往下移动</p> <p>​					margin-bottom</p> <p>​								---下外边距   下边的元素会向下移动</p> <p>​					margin-right</p> <p>​								--- 右外边距    默认情况下设置margin-right不会产生任何的影响</p> <p>​					margin-left</p> <p>​								--- 左外边距   设置一个正值  元素会向右移动</p> <p>​	注意:margin也可以设置负值,如果是负值则是相反方向去移动</p> <p>元素在页面是按照自左往右的顺序排列</p> <p>​						所以默认情况下我们设置左和上外边距是移动元素</p> <p>​						而设置下和右外边距则会移动其他的元素</p> <p><strong>margin的简写写法</strong></p> <p>margin:100px; 一个值 : 代表上下左右</p> <p>margin:100px 50px; 两个值 :  第一个值代表上下 第2个值代表左右</p> <p>margin100px 50px 20px; 三个值: 第一个值代表上  第2个值代表左右  第3个值代表下</p> <p>margin:100px 50px 20px 0;四个值:  第一个值上  第二个值右  第三个值下  第四个值左</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
		<span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span><span class="token comment">/*块级元素水平排列
    					auto只对外边距有效 代表自动计算的意思 只能实现左右自动居中*/</span>
<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="怪异盒模型"><a href="#怪异盒模型" class="header-anchor">#</a> 怪异盒模型</h3> <blockquote><p>默认情况下,盒子的大小由内容区,内边距,边框共同决定.</p> <p>box-sizing 用来设置盒子尺寸的计算方式(width和height的作用)</p> <p>​				可选值:</p> <p>​						   content-box 默认值 宽度和高度用来设置内容区的大小</p> <p>​							border-box   宽度和高度是设置整个盒子的大小</p></blockquote> <ul><li>标准模式中，网页元素的宽度是有padding,border,width三者的宽度相加决定的。</li> <li>怪异模式中，width包含padding和border的宽度，即网页宽度为width。</li></ul> <p><strong>选择怪异还是标准</strong></p> <blockquote><p>如果不想因为改变padding的时候盒子的大小也会跟着变化的话就可以使用怪异盒模型,</p> <p>而如果想让盒子的大小被padding撑开的话就可以使用标准盒模型</p></blockquote> <h3 id="盒子的大小计算不同"><a href="#盒子的大小计算不同" class="header-anchor">#</a> 盒子的大小计算不同</h3> <p><strong>盒模型的组成，由里向外分别是 content，padding，border，margin</strong></p> <p><strong>1.标准盒模型</strong></p> <blockquote><p>盒子的左右占位 =  width + 左右padding +  左右border + 左右margin</p> <p>盒子的上下占位 =  height + 上下padding + 上下border + 上下margin</p> <p>盒子的宽度 = width + 左右padding +  左右border</p> <p>盒子的高度 = height + 上下padding +  上下border</p></blockquote> <p><strong>2.怪异盒模型</strong></p> <blockquote><p>盒子的左右占位 = width + 左右margin</p> <p>盒子的上下占位 = height + 上下margin</p> <p>盒子的宽度 = width</p> <p>盒子的高度 = height</p></blockquote> <h2 id="垂直外边距合并-折叠-现象"><a href="#垂直外边距合并-折叠-现象" class="header-anchor">#</a> 垂直外边距合并(折叠)现象</h2> <p><strong>发生条件</strong></p> <blockquote><p>相邻的块级元素垂直方向会发生重叠现象</p></blockquote> <h3 id="兄弟外边距合并"><a href="#兄弟外边距合并" class="header-anchor">#</a> 兄弟外边距合并</h3> <blockquote><p>兄弟元素间的垂直外边距会取两者之间的最大值(两者都是正值)</p> <p>特殊情况</p> <p>​				如果相邻的外边距.一正一负,则取两者的和</p> <p>​				如果相邻的外边距都是负值,则取两者中绝对值较大的.</p> <p>兄弟元素之间的外边距的重叠,对于开发是有利的,我们不需要处理.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.bro1</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
		<span class="token property">margin-bottom</span><span class="token punctuation">:</span>150px<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token selector">.bro2</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> lightgreen<span class="token punctuation">;</span>
		<span class="token property">margin-top</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	 &lt;div class=<span class="token string">&quot;bro1&quot;</span>&gt;&lt;/div&gt;                                                      	   &lt;div class=<span class="token string">&quot;bro2&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="父子外边距合并"><a href="#父子外边距合并" class="header-anchor">#</a> 父子外边距合并</h3> <blockquote><p>父子级之间的上外边距会发生合并  是针对于内部第一儿子</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>  <span class="token selector">.fa</span><span class="token punctuation">{</span>
       <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
       <span class="token property">height</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
       <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token selector">.son</span><span class="token punctuation">{</span>
       <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
       <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
       <span class="token property">background-color</span><span class="token punctuation">:</span>skyblue<span class="token punctuation">;</span>
       <span class="token property">margin-top</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token comment">/*此时子元素外边距仿佛变成了父元素的外边距*/</span>
   <span class="token punctuation">}</span>

   &lt;div class=<span class="token string">&quot;fa&quot;</span>&gt;
        &lt;div class=<span class="token string">&quot;son&quot;</span>&gt;&lt;/div&gt;
    &lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>父子外边距合并会影响到页面的布局,必须要进行处理</p> <blockquote><p><strong>处理方法</strong></p> <p>​	 	1.给父级加上border</p> <div class="language- extra-class"><pre><code>    2.给父级加上padding
</code></pre></div></blockquote></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="prev">
        01-CSS基本样式和选择器
      </a></span> <span class="next"><a href="/./guide/notes/css/05-行内盒模型.html">
        03-行内盒模型
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/19.013b5e02.js" defer></script>
  </body>
</html>
